<template>
  <div>
    <head-top goBack="true" style="background: none"></head-top>
    <div class="top flexCenter">
      <div class="flexCenter">
        <img src="../../images/logo.svg" alt="">
      </div>
    </div>
    <div class="container">
      <div class="cell flexLeft">
        <span class="iconfont icon-shouji"></span>
        <input maxlength="11" type="tel" v-model="info.UserPhone" placeholder="请输入手机号">
        <button
          @click="getSms"
          :disabled="info.UserPhone.length!=11||!isClick"
          :class="{'btn-error':info.UserPhone.length==11&&isClick,'btn-default':info.UserPhone.length!=11||!isClick}"
          class="btn"
        >{{btnName}}
        </button>
      </div>
      <div class="cell flexLeft">
        <span class="iconfont icon-yanzhengma"></span>
        <input type="text" v-model="info.SMS" placeholder="请输入验证码">
      </div>
      <div class="cell flexLeft">
        <span class="iconfont icon-mima"></span>
        <input type="password" v-model="info.UserPwd" placeholder="请输入新密码">
      </div>
      <div class="flexAround">
        <label class="registerType" for="guider">
          <input value="1" v-model="info.UserType" name="type" id="guider" type="radio">
          导购员
        </label>
        <label class="registerType" for="customer">
          <input value="2" v-model="info.UserType" name="type" id="customer" type="radio">
          消费者
        </label>
      </div>
      <button
        :disabled="!isRegister"
        @click="registerInfo"
        :class="{'btn-big-error':isRegister,'btn-big-default':!isRegister}"
        class="btn-big"
      >确认修改</button>
    </div>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
import { setInterval, clearInterval } from "timers";
import headTop from "src/components/header/newHead";

export default {
  data() {
    return {
      info: {
        UserPhone: "",
        UserPwd: "",
        SMS: "",
        UserType: 2,
        EnterpriseId: 0
      },
      time: 20,
      btnName: "获取验证码",
      Interval: "",
      isClick: true
    };
  },
  components: {
    headTop
  },
  computed: {
    isRegister() {
      if (this.info.UserPhone.length == 11 && this.info.UserPwd.length >= 6) {
        return true;
      } else {
        return false;
      }
    }
  },
  methods: {
    getSms() {
      this.isClick = false;
      this.btnName = this.time + "s后重新获取";
      this.$axios
        .post("smseid", {
          phone: this.info.UserPhone,
          eid: this.info.EnterpriseId
        })
        .then(p => {
          this.info.Gid = p.data.result.Gid;
          if (p.data.status == "10001") {
            Toast({
              message: p.data.result.msg,
              iconClass: "iconfont icon-dui",
              duration: 1500
            });
            this.Interval = setInterval(() => {
              this.time--;
              if (this.time > 0) {
                this.isClick = false;
                this.btnName = this.time + "s后重新获取";
              } else {
                this.time = 20;
                this.btnName = "重新发送";
                this.isClick = true;
                clearInterval(this.Interval);
              }
            }, 1000);
          }
        });
    },
    registerInfo() {
      if (this.info.Gid) {
        this.$axios.post("integral.user.forgetpwd", this.info).then(p => {
          if (p.data.msg == "密码修改成功") {
            Toast({
              message: p.data.msg,
              iconClass: "iconfont icon-dui",
              duration: 1500
            });
            setTimeout(() => {
              this.$router.replace({
                path: "/login",
                query: {
                  phone: this.info.UserPhone,
                  pwd: this.info.UserPwd,
                  eid: this.info.EnterpriseId,
                  userType:this.info.UserType
                }
              });
            }, 1500);
          } else {
            Toast({
              message: p.data.msg,
              iconClass: "iconfont icon-cuo",
              duration: 1500
            });
          }
        });
      } else {
        Toast({
          message: "请先获取验证码",
          iconClass: "iconfont icon-cuo",
          duration: 1500
        });
      }
    }
  },
  created() {
    if (this.$route.query.eid) {
      this.info.EnterpriseId = this.$route.query.eid;
    }
  }
};
</script>
<style lang="scss" scoped>
.top {
  padding: 2.13rem 0;
  > div {
    width: 2.99rem;
    height: 2.99rem;
    overflow: hidden;
  }
  img {
    width: 100%;
    /*border-radius: 50%;*/
  }
}
.container {
  width: 90%;
  margin: 0 auto;
  .cell {
    border-bottom: 1px solid #e7eaed;
    padding-bottom: 5px;
    margin-bottom: 10px;
    .iconfont {
      font-size: 1rem;
      margin-right: 0.43rem;
      margin-left: 0.43rem;
      color: #b8b8b8;
    }
    input {
      flex: 1;
      background: none;
      height: 1.49rem;
      border: none;
      outline: none;
      font-size: 16px;
    }
  }
  .tips {
    span {
      color: #b8b8b8;
      font-size: 0.51rem;
      margin-top: 0.43rem;
      padding: 0.43rem;
    }
  }
  .registerType {
    font-size: 0.68rem;
    margin: 0.43rem 0 0.64rem;
    color: #b8b8b8;
    input {
      margin-left: 0.43rem;
    }
  }
}
</style>
